<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">交易记录</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="manage-top-content">
				<view :class="selTab==item.value?'sel':'unsel'" v-for="(item,index) in tabList" :key="index" @click="changeTab(item.value)">
				  {{item.name}}
				</view>
			</view>
			<view class="sel-time-content">
				<view class="sel-text-title" @click="showTime">{{selTime}}年</view>
				<view class="padding-top-14">
					<text class="text-sm text-767879">累计充值</text>
					<text class="padding-left-4 text-sm text-0101 text-bold-500">￥{{energyRechargeLog.sum}}</text>
				</view>
			</view>
			<view v-if="selTab==1">
				<view class="cz-list-content" v-for="(item,index) in energyRechargeLog.list" :key="index">
					<view class="">
						<image src="https://txr001.zthj.net/newImg/czLogo.png" class="img-72"></image>
					</view>
					<view class="padding-left-16 flex align-center justify-between" style="width: 100%;">
						<view class="">
							<view class="title">能量充值成功</view>
							<view class="titel-desc">{{item.payed_time_text}}</view>
						</view>
						<view>
							<view class="title-right text-right">+{{item.energy}}</view>
							<view class="titel-desc">实付金额￥{{item.price}}</view>
						</view>
					</view>
				</view>
				<view class="text-center" v-if="energyRechargeLog.list.length == 0">
					<view>
						<image src="https://txr001.zthj.net/static/img/background.png" class="lgog-img"></image>
					</view>
					<view class="padding-top-48 text-black text-lg jqqd">
						暂无数据
					</view>
				</view>
			</view>
			<view v-if="selTab==2">
				<view class="cz-list-content" v-for="(item,index) in 6" :key="index">
					<view class="">
						<image src="https://txr001.zthj.net/newImg/jlLogo.png" class="img-72"></image>
					</view>
					<view class="padding-left-16 flex align-start justify-between" style="width: 100%;">
						<view class="">
							<view class="title">购买碳排放模型</view>
							<view class="titel-desc">2023-10-02 12:23</view>
						</view>
						<view>
							<view class="title-right-sec text-right">-1000</view>
						</view>
					</view>
				</view>
				<view class="text-center" v-if="!list.length">
					<view>
						<image src="https://txr001.zthj.net/static/img/background.png" class="lgog-img"></image>
					</view>
					<view class="padding-top-48 text-black text-lg jqqd">
						暂无数据
					</view>
				</view>
			</view>
		</view>
		<pickDate ref="dateTime" :type="type" :startYear="startYear" :endYear="endYear" :cancelColor="cancelColor"
			:color="color" :setDateTime="setDateTime" @confirm="change">
		</pickDate>
	</view>
</template>

<script>
	import pickDate from './../../components/tui-datetime/tui-datetime.vue'
	export default {
		components:{pickDate},
		data() {
			return {
				selTab:1,
				tabList:[
					{name:"充值记录",value:"1"},
					{name:"交易记录",value:"2"},
				],
                energyRechargeLog:{},
				startYear: 2000,
				endYear: 2099,
				cancelColor: '#888',
				color: '#5677fc',
				type:"",
				selTime:"2023",
				list:[]
			}
		},
		onLoad(option) {
            this.selTime = new Date().getFullYear();
            this.selTab = option.tab;
            this.load();
		},
		methods: {
			changeTab(value){
				this.selTab=value
				this.type = 1;
                this.load();
				this.$forceUpdate();
			},
            async load(){
                if(this.selTab == 1){
                    let res = await this.$api.EnergyRechargeLog({
                        year: this.selTime
                    });
                    if(res.code == 1){
                        this.energyRechargeLog = res.data
                    }
                }
            },
			showTime() {
				this.$refs.dateTime.show();
			},
			change(e) {
				this.selTime = e.result;
                this.load();
			}
		}
	}
</script>
<style>
	page{background-color: #fff;}
</style>
<style scoped lang="less">
	.manage-top-content{
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		// width: 700rpx;
		overflow-y: scroll;
		.sel{
			padding: 0 16rpx;
			height: 50rpx;
			line-height:50rpx;
			background: #010101;
			border-radius: 30rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			text-align: center;
		}
		.unsel{
			// min-width: 224rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #010101;
			text-align: center;
			// margin-right: 60rpx;
		}
	}
	.sel-text-title{
		padding-top: 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #010101;
	}
	.sel-time-content{
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #767879;
	}
	.cz-list-content{
		padding: 48rpx 0;
		border-bottom: 2rpx solid #D9D9D9;
		display: flex;
		align-items: center;
		justify-content: start;
		.title{
			font-size: 32rpx;
			color: #010101;
		}
		.title-desc{
			padding-top: 8rpx;
			font-size: 24rpx;
			color: #767879;
		}
		.title-right{
			font-size: 28rpx;
			font-weight: 600;
			color: #264790;
		}
		.title-right-sec{
			font-size: 28rpx;
			font-weight: 600;
			color: #01C779;
		}
	}
	
</style>